<template>
	<view class="edit-info">
		<!-- S 顶部导航 -->
		<sol-navbar title="编辑资料"></sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 头像 -->
		<sol-avatar class="edit-info__avatar" :src="avatar" :size="188" :gender="gender"
			src-error="/static/icon-default/icon_upload_avatar.png" @click="fnChooseAvatar"></sol-avatar>
		<!-- E 头像 -->

		<!-- S 性别 -->
		<view class="edit-info__gender">
			<view class="edit-info__gender-item" @click="()=> gender = 1">
				<sol-radio name="1" :value="gender"></sol-radio>
				<text>男性细胞</text>
			</view>
			<view class="edit-info__gender-item" @click="()=> gender = 2">
				<sol-radio name="2" :value="gender"></sol-radio>
				<text>女性细胞</text>
			</view>
		</view>
		<!-- E 性别 -->

		<!-- S 输入昵称 -->
		<view class="edit-info__label">输入昵称</view>
		<input class="edit-info__nickname" type="text" placeholder="昵称" :maxlength="12" v-model="nickname" />
		<!-- E 输入昵称 -->

		<!-- S 频道简介 -->
		<view class="edit-info__label">频道简介</view>
		<textarea class="edit-info__brief" placeholder="简单介绍你的个人频道或者创作的方向等 (200字内)" :maxlength="200"
			:show-confirm-bar="false" v-model="brief" />
		<!-- E 频道简介 -->
		<button class="edit-info__btn" @click="fnSave">保存设置</button>
		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "EditInfo",
		data() {
			return {
				// 头像
				avatar: "",
				// 性别
				gender: 1,
				// 昵称
				nickname: "",
				// 频道简介
				brief: ""
			};
		},
		computed: {},
		methods: {
			// 选择选择头像图片
			fnChooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					success: res => {
						const filePath = res.tempFiles[0].path;
						const fileSize = res.tempFiles[0].size;
						// #ifdef H5
						const fileType = res.tempFiles[0].name.substring(res.tempFiles[0].name.lastIndexOf(
							'.'));
						// #endif
						// #ifndef H5
						const fileType = filePath.substring(filePath.lastIndexOf('.'));
						// #endif

						this.avatar = filePath;
						this.$log('uploadImage fileType=>', fileType);
						uni.showModal({
							title: '提示',
							content: '头像上传失败。',
							showCancel: false
						});
					}
				})
			},
			// 保存设置
			fnSave() {
				this.$log(this.$options.name, 89);
				this.$log(this.avatar);
				this.$log(this.gender);
				this.$log(this.nickname);
				this.$log(this.brief);
			}

		}
	}
</script>

<style lang="scss">
	.edit-info {
		min-height: 100vh;
		background-color: $--color-background;

		&__avatar {
			display: block;
			width: 188rpx;
			height: 188rpx;
			margin: 32rpx auto 42rpx;
		}

		&__gender {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			padding: 0 28rpx;

			&-item {
				width: 224rpx;
				height: 88rpx;
				padding: 0 28rpx;
				border-radius: 88rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				background-color: #474e54;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 4rpx;
				color: $--color-text;
			}
		}

		&__label {
			padding: 42rpx 28rpx 28rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #BBBBBB;
		}

		&__nickname {
			height: 112rpx;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 4rpx;
			color: #dddddd;
			border-radius: 24rpx;
			background-color: #474e54;
			padding: 0 28rpx;
			margin-left: 28rpx;
			width: 85%;
		}

		&__brief {
			height: 350rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 4rpx;
			color: #dddddd;
			border-radius: 24rpx;
			background-color: #474e54;
			padding: 28rpx;
			margin-left: 28rpx;
			margin-bottom: 90rpx;
			width: 85%;
		}

		&__btn {
			width: 424rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 94rpx;
			border: none;
			overflow: hidden;
			padding: 0;
			font-size: 32rpx;
			font-weight: normal;
			letter-spacing: 4rpx;
			background-color: #607d8b !important;
			color: #DDDDDD !important;
		}
	}
</style>
